<template>
    <div class="common">
        <el-form 
            :model="form" 
            :rules="rules" 
            ref="ruleForm" 
            label-width="100px" 
            class="myform">
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input  type="password" show-password v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="width100" @click="loginTodo" >立即登录</el-button>
            </el-form-item>
        </el-form>

    <div v-show="!show">
    <slide-verify  class="yana"
     :l="42"
     :r="10"
     :w="450"
     :h="250"

    ref="slideblock"
    @again="onAgain"
    @fulfilled="onFulfilled"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :show="show"
    :accuracy="accuracy"
    :slider-text="text"
     ></slide-verify>
    </div>
    </div>
</template>

<script>
import {signinAjax} from "@/api"
import Vue from 'vue';
export default {
    name:"login",
    data(){
        return {
            msg: '',
            text: '向右滑',
          // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            accuracy: 1,
            show:true,
            form:{
                mobile:""
            },
            rules:{   // 表单校验 
                mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ]
            }
        }
    },
    methods:{
         onSuccess(times){
           console.log('验证通过，耗时 ' +times + '毫秒');
            this.$router.push({name:'index'}) 
        },
        onFail(){
            console.log('验证不通过');
            this.msg = ''
        },
        onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦！');
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
        	// 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
        loginTodo(){
            
            this.$refs.ruleForm.validate(valid=>{  // 表单的全局校验 
                if(valid){
                    this.show = !this.show;
                    signinAjax(this.form)
                    .then(res=>{
                        if(res.type){
                            // 登录成功
                           sessionStorage.setItem("token",res.token);
                            localStorage.setItem("mobile",this.form.mobile);
                            // this.$router.push({name:'index'})  // 登录成功进入主页 
                            
                        }
                    })
                    .catch(err=>{
                        
                    })
                }else{
                    console.log("error");
                    return false;
                }
            })
        }
    },
    mounted(){
        if(localStorage.getItem("mobile")){
            this.form.mobile = localStorage.getItem("mobile")
        }
    }
}
</script>

<style lang="scss" scoped>
.myform{
    padding-right:50px;
    padding-top:20px;
}
.width100{
    width:100%;
}
</style>